<template>
  <div class='container'>
    <el-dialog  :visible="showDialog"  @close="closeDialog" :title="showtitle"   width="30%" :close-on-click-modal="false">
        <!-- 表单内容 -->
        <el-form ref="addForm" label-width="80px"  :model="formData" :rules="rules">
          <el-form-item label="学科名称" prop="subjectName" >
            <el-input v-model="formData.subjectName"></el-input>
          </el-form-item>

          <el-form-item label="是否显示" >
            <el-switch
              v-model="formData.isFrontDisplay"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-form>

        <template>
          <div style="text-align: right;">
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="confirmadd">确定</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      formData: {
        subjectName: '', // 名称
        isFrontDisplay: '' // 是否显示
      },
      /**
       * 部门效验
       */
      rules: {
        subjectName: [
          { required: true, message: '部门名称不可为空', trigger: 'blur' }
        ]
      },
      fromlist: []
    }
  },
  /**
   * 按钮标题
   */
  computed: {
    showtitle () {
      return this.formData.id ? '修改学科' : '添加学科'
    }
  },
  /**
   * 打开弹窗
   */
  props: {
    // 父传子方法
    showDialog: {
      type: Boolean, // 类型:布尔值
      default: false// 默认是关闭
    }
  },
  methods: {
    // this.$emit('closeDialgEmit')
    // 如果父组件把修改值的权利交给了子组件 ，那子组件必须通过固定语法去修改父组件传过来的值。 this.$emit(update:Props传过来的值,你要修改的值)
    // 固定语法完成子组件修改父组件的值
    /**
     * 关闭弹窗方法
     */
    closeDialog () {
      this.$emit('update:showDialog', false)
      // 清空表单
      this.$refs.addForm.resetFields()
      setTimeout(() => {
        this.formData = {
          subjectName: '',
          isFrontDisplay: ''// 是否显示
        }
      }, 500)
    },
    /**
     * 点击确定按钮,添加和修改
     */
    confirmadd () {
      // 确定修改的弹窗提示
      this.$refs.addForm.validate(async flag => {
        if (!flag) return
        if (this.formData.id) { // 带id的是修改
          await update(this.formData)
          this.$message.success('恭喜！修改成功')
        } else {
          await add(this.formData)
          this.$message.success('恭喜！添加成功')
        }
        this.closeDialog()// 关闭弹窗
        this.$parent.getSubjectList() // 子组件用父组件内部的方法
      })
    },
    /**
     * 修改数据回显
     */
    async updateEmit (id) {
      const { data } = await detail(id)
      this.formData = data
      console.log(data)
    }

  }
}
</script>

<style scoped lang='less'>

</style>
